.toggle {
  --height: 28px;
  --width: 44px;
  --knob-size: 24px;

  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  width: var(--width);
  height: var(--height);

  .input {
    opacity: 0;
    width: 0;

    &:checked + .track {
      background-color: #047aff;
    }

    &:checked + .track:before {
      transform: translateX(calc(var(--width) - var(--height)));
    }

    &:disabled + .track {
      opacity: 0.8;
      cursor: not-allowed;
    }

    &:focus-visible + .track {
      outline: solid 1px var(--color-focus-blue);
      outline-offset: 2px;
    }
  }

  .track {
    width: var(--width);
    height: var(--height);
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    bottom: 0;
    transition:
      transform 0.15s,
      background-color 0.15s;
    background: var(--bg-toggle-track);
    border-radius: 100px;
    &:before {
      position: absolute;
      content: '';
      width: var(--knob-size);
      height: var(--knob-size);
      background-color: #fff;
      transition: all 0.4s;
      border-radius: 100%;
      top: calc((var(--height) - var(--knob-size)) / 2);
      left: calc((var(--height) - var(--knob-size)) / 2);
    }
  }
}
